<template>
    <div>
        <router-link to="/zengbumain" style="position: absolute;top: 10px;left: 10px;">返回</router-link>
        <h3>{{ formData.applicationDepartment }}人员增补申请单</h3>
        <p>填单日期：{{ formData.fillDate }}</p>
        <!-- <input v-model="" type="date"> -->
        <table border="1">
            <tbody>
                <tr>
                    <td>申请部门</td>
                    <td colspan="2"><input v-model="formData.applicationDepartment" type="text"></td>
                    <td>申请职位</td>
                    <td><input v-model="formData.applicationPosition" type="text"></td>
                    <td>申请人</td>
                    <td><input v-model="formData.applicant" type="text"></td>
                </tr>
                <tr>
                    <td>类 别</td>
                    <td colspan="2">
                        <input type="radio" v-model="formData.employeeType" value="直接员工"> 直接员工
                        <input type="radio" v-model="formData.employeeType" value="间接员工"> 间接员工
                    </td>
                    <td>需求日期</td>
                    <td colspan="3"><input v-model="formData.demandDate" type="date"></td>
                </tr>
                <tr>
                    <td rowspan="4">申 请 人 数</td>
                    <td>原编制</td>
                    <td><span><input v-model="formData.originalStaffing" type="number">人</span></td>
                    <td>现有人力</td>
                    <td><span><input v-model="formData.currentStaff" type="number">人</span></td>
                    <td>差异人力</td>
                    <td><span><input v-model="formData.differenceStaff" type="number">人</span></td>
                </tr>
                <tr>
                    <td>递补人力</td>
                    <td colspan="5">
                        <div>
                            <span><input type="radio" v-model="formData.replacementGender" value="男">男<input
                                    v-model="formData.replacementMaleCount" type="number">名，</span>
                            <span><input type="radio" v-model="formData.replacementGender" value="女">女<input
                                    v-model="formData.replacementFemaleCount" type="number">名，</span>
                            <span><input type="radio" v-model="formData.replacementGender"
                                    value="男女不限">男女不限&emsp;</span>
                            <span>增补名额<input v-model="formData.replacementQuota" type="number">名。</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>增加人力</td>
                    <td colspan="5">
                        <div>
                            <span><input type="radio" v-model="formData.increaseGender" value="男">男<input
                                    v-model="formData.increaseMaleCount" type="number">名，</span>
                            <span><input type="radio" v-model="formData.increaseGender" value="女">女<input
                                    v-model="formData.increaseFemaleCount" type="number">名，</span>
                            <span><input type="radio" v-model="formData.increaseGender" value="男女不限">男女不限&emsp;</span>
                            <span>增补名额<input v-model="formData.increaseQuota" type="number">名。</span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>编 制 空 缺 原 因</td>
                    <td colspan="5">
                        <span style="display: flex;flex-direction: column;align-items: flex-start;">
                            <span>
                                <input type="checkbox" v-model="formData.reasonForVacancy[0]"> 递补离职缺，离职者姓名及离职日期： <input
                                    v-model="formData.reasonForVacancyDetails[0]" type="text">
                            </span>

                            <span>
                                <input type="checkbox" v-model="formData.reasonForVacancy[1]"> 业务扩增，扩增内容： <input
                                    v-model="formData.reasonForVacancyDetails[1]" type="text">
                            </span>

                            <span>
                                <input type="checkbox" v-model="formData.reasonForVacancy[2]"> 其它： <input
                                    v-model="formData.reasonForVacancyDetails[2]" type="text">
                            </span>

                        </span>
                    </td>
                </tr>
                <tr>
                    <td>职务描述</td>
                    <td colspan="6">
                        <textarea v-model="formData.jobDescription" cols="30" rows="10"></textarea>
                    </td>
                </tr>
                <tr>
                    <td rowspan="3">硬性资格</td>
                    <td>年 &emsp;龄</td>
                    <td colspan="2">
                        <input type="radio" v-model="formData.ageRequirement" value="不要求"> 不要求
                        <input type="radio" v-model="formData.ageRequirement" value="要求"> 要求 <input
                            v-model="formData.ageDetails" type="text">
                    </td>
                    <td rowspan="2">语言要求</td>
                    <td colspan="2">
                        <input type="checkbox" v-model="formData.languageRequirement[0]"> 英语（四级： <input
                            v-model="formData.englishLevelDetails[0]" type="text"> 六级： <input
                            v-model="formData.englishLevelDetails[1]" type="text"> ）
                    </td>
                </tr>
                <tr>
                    <td>学 历</td>
                    <td colspan="2">
                        <input type="radio" v-model="formData.educationRequirement" value="不要求"> 不要求
                        <input type="radio" v-model="formData.educationRequirement" value="要求"> 要求 <input
                            v-model="formData.educationDetails" type="text">
                    </td>
                    <td colspan="2">
                        <input type="checkbox" v-model="formData.languageRequirement[1]"> 普通话
                        <input type="checkbox" v-model="formData.languageRequirement[2]"> 其他 <input
                            v-model="formData.otherLanguageDetails" type="text">
                    </td>
                </tr>
                <tr>
                    <td>主修科目</td>
                    <td colspan="2">
                        <input type="radio" v-model="formData.majorRequirement" value="不要求"> 不要求
                        <input type="radio" v-model="formData.majorRequirement" value="要求"> 要求 <input
                            v-model="formData.majorDetails" type="text">
                    </td>
                    <td>工作经验</td>
                    <td colspan="2">
                        <input type="radio" v-model="formData.experienceRequirement" value="不要求"> 不要求
                        <input type="radio" v-model="formData.experienceRequirement" value="要求"> 要求 <input
                            v-model="formData.experienceDetails" type="text">
                    </td>
                </tr>
                <!-- <tr>
                    
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr> -->
                <tr>
                    <td>必备技能</td>
                    <td colspan="6"><textarea v-model="formData.necessarySkills"></textarea></td>
                </tr>
                <tr>
                    <td>薪酬标准</td>
                    <td><input v-model="formData.salaryStandard" type="text"></td>
                    <td>复试人员</td>
                    <td><input v-model="formData.reinterviewPersons" type="text"></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
        <table border="1">
            <thead>
                <tr>
                    <th>审批人</th>
                    <th>意见</th>
                    <th>签字</th>
                    <th>日期</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>部门主管/经理</td>
                    <td><textarea class="textkuang" v-model="formData.departmentOpinion"></textarea></td>
                    <td>
                        <canvas style="border: 1px solid #ccc;" ref="departmentSignatureCanvas" :width="canvasWidth"
                            :height="canvasHeight" @mousedown="startDrawing('department')"
                            @mousemove="draw('department')" @mouseup="stopDrawing('department')"
                            @mouseout="stopDrawing('department')" @touchstart="startDrawing('department')"
                            @touchmove="draw('department')" @touchend="stopDrawing('department')"></canvas>
                        <div>
                            <button @click="clearSignature('department')">清除签名</button>
                            <button @click="saveSignature('department')">保存签名</button>
                        </div>
                    </td>
                    <td>{{ formData.departmentDate }}</td>
                    <!-- <input v-model="formData.departmentDate" type="date"> -->
                </tr>
                <tr>
                    <td>部长/总监</td>
                    <td><textarea class="textkuang" v-model="formData.directorOpinion"></textarea></td>
                    <td>
                        <canvas style="border: 1px solid #ccc;" ref="directorSignatureCanvas" :width="canvasWidth"
                            :height="canvasHeight" @mousedown="startDrawing('director')" @mousemove="draw('director')"
                            @mouseup="stopDrawing('director')" @mouseout="stopDrawing('director')"
                            @touchstart="startDrawing('director')" @touchmove="draw('director')"
                            @touchend="stopDrawing('director')"></canvas>
                        <div>
                            <button @click="clearSignature('director')">清除签名</button>
                            <button @click="saveSignature('director')">保存签名</button>
                        </div>
                    </td>
                    <td>{{ formData.directorDate }}</td>
                    <!-- <input v-model="formData.directorDate" type="date"> -->
                </tr>
                <tr>
                    <td>企业管理部</td>
                    <td><textarea class="textkuang" v-model="formData.corporateManagementOpinion"></textarea></td>
                    <td>
                        <canvas style="border: 1px solid #ccc;" ref="corporateManagementSignatureCanvas"
                            :width="canvasWidth" :height="canvasHeight" @mousedown="startDrawing('corporateManagement')"
                            @mousemove="draw('corporateManagement')" @mouseup="stopDrawing('corporateManagement')"
                            @mouseout="stopDrawing('corporateManagement')"
                            @touchstart="startDrawing('corporateManagement')" @touchmove="draw('corporateManagement')"
                            @touchend="stopDrawing('corporateManagement')"></canvas>
                        <div>
                            <button @click="clearSignature('corporateManagement')">清除签名</button>
                            <button @click="saveSignature('corporateManagement')">保存签名</button>
                        </div>
                    </td>
                    <td>{{ formData.corporateManagementDate }}</td>
                    <!-- <input v-model="" type="date"> -->
                </tr>
                <tr>
                    <td>总经理</td>
                    <td><textarea class="textkuang" v-model="formData.generalManagerOpinion"></textarea></td>
                    <td>
                        <canvas style="border: 1px solid #ccc;" ref="generalManagerSignatureCanvas" :width="canvasWidth"
                            :height="canvasHeight" @mousedown="startDrawing('generalManager')"
                            @mousemove="draw('generalManager')" @mouseup="stopDrawing('generalManager')"
                            @mouseout="stopDrawing('generalManager')" @touchstart="startDrawing('generalManager')"
                            @touchmove="draw('generalManager')" @touchend="stopDrawing('generalManager')"></canvas>
                        <div>
                            <button @click="clearSignature('generalManager')">清除签名</button>
                            <button @click="saveSignature('generalManager')">保存签名</button>
                        </div>
                    </td>
                    <td>{{ formData.generalManagerDate }}</td>
                    <!-- <input v-model="formData.generalManagerDate" type="date"> -->
                </tr>
                <tr>
                    <td>总裁/董事长</td>
                    <td><textarea class="textkuang" v-model="formData.presidentOpinion"></textarea></td>
                    <td>
                        <canvas style="border: 1px solid #ccc;" ref="presidentSignatureCanvas" :width="canvasWidth"
                            :height="canvasHeight" @mousedown="startDrawing('president')" @mousemove="draw('president')"
                            @mouseup="stopDrawing('president')" @mouseout="stopDrawing('president')"
                            @touchstart="startDrawing('president')" @touchmove="draw('president')"
                            @touchend="stopDrawing('president')"></canvas>
                        <div>
                            <button @click="clearSignature('president')">清除签名</button>
                            <button @click="saveSignature('president')">保存签名</button>
                        </div>
                    </td>
                    <td>{{ formData.presidentDate }}</td>
                    <!-- <input v-model="" type="date"> -->
                </tr>
                <tr>
                    <td>
                        备注：
                    </td>
                    <td colspan="5">
                        <br>1、增补直接人员提前7日向人资单位提供签核完整的《人力增补申请单》。
                        <br>2、增补间接人员提前15日向人资单位提供签核完整的《人力增补申请单》。
                        <br>3、新增人力及编制之外岗位统一须呈总裁核准；
                        <br>4、新增加编制岗位必须附上《岗位说明书》。
                    </td>
                </tr>
            </tbody>
        </table>
        <p>表单编号及版本：AM - JY - 011 A/1 保存期限：长期</p>
        <div class="button-group">
            <button @click="saveForm">保存</button>
            <button @click="viewList">查看列表</button>
            <router-link to="/zengbumain" class="back-btn">
                <button>返回</button>
            </router-link>
        </div>
    </div>
</template>

<script>
import router from '@/router';
import axios from 'axios';

export default {
    data() {
        return {
            formData: {
                fillDate: new Date().toISOString().split('T')[0],
                applicationDepartment: this.$route.params.name,
                applicationPosition: '',
                applicant: '',
                employeeType: '',
                demandDate: '',
                originalStaffing: 0,
                currentStaff: 0,
                differenceStaff: 0,
                replacementGender: '',
                replacementMaleCount: 0,
                replacementFemaleCount: 0,
                replacementQuota: 0,
                increaseGender: '',
                increaseMaleCount: 0,
                increaseFemaleCount: 0,
                increaseQuota: 0,
                reasonForVacancy: [false, false, false],//缺岗原因
                reasonForVacancyDetails: ['', '', ''],//缺岗原因
                jobDescription: '',
                ageRequirement: '',//年龄要求
                ageDetails: '',//年龄要求详情
                languageRequirement: [false, false, false],//语言要求
                englishLevelDetails: ['', ''],//语言要求详情
                otherLanguageDetails: '',
                educationRequirement: '',
                educationDetails: '',
                majorRequirement: '',
                majorDetails: '',
                experienceRequirement: '',
                experienceDetails: '',
                necessarySkills: '',
                salaryStandard: '',
                reinterviewPersons: '',
                departmentOpinion: '',
                departmentSignature: '',
                departmentDate: new Date().toISOString().split('T')[0],
                directorOpinion: '',
                directorSignature: '',
                directorDate: new Date().toISOString().split('T')[0],
                generalManagerOpinion: '',
                generalManagerSignature: '',
                generalManagerDate: new Date().toISOString().split('T')[0],
                corporateManagementOpinion: '',
                corporateManagementSignature: '',
                corporateManagementDate: new Date().toISOString().split('T')[0],
                presidentOpinion: '',
                presidentSignature: '',
                presidentDate: new Date().toISOString().split('T')[0]
            },
            isDrawing: {
                department: false,
                director: false,
                generalManager: false,
                corporateManagement: false,
                president: false
            },
            lastX: {
                department: 0,
                director: 0,
                generalManager: 0,
                corporateManagement: 0,
                president: 0
            },
            lastY: {
                department: 0,
                director: 0,
                generalManager: 0,
                corporateManagement: 0,
                president: 0
            },
            canvasWidth: 300,
            canvasHeight: 100
        };
    },
    mounted() {
        document.title = '人员增补申请单';
    },
    methods: {
        nextStep() {
            this.$router.push({
                name: 'ruzhientry',
                params: { name: this.formData.applicationDepartment }
            })
            console.log("带的",this.formData.applicationDepartment);
        },
        startDrawing(role, e) {
            const canvas = this.$refs[`${role}SignatureCanvas`];
            if (canvas) {
                const ctx = canvas.getContext("2d");
                ctx.strokeStyle = "#000";
                ctx.lineWidth = 2;
                ctx.lineCap = "round";
                this.isDrawing[role] = true;
                const { offsetX, offsetY } = this.getCoordinates(e, canvas);
                this.lastX[role] = offsetX;
                this.lastY[role] = offsetY;
            }
        },
        draw(role, e) {
            if (this.isDrawing[role]) {
                const canvas = this.$refs[`${role}SignatureCanvas`];
                if (canvas) {
                    const ctx = canvas.getContext("2d");
                    const { offsetX, offsetY } = this.getCoordinates(e, canvas);
                    ctx.beginPath();
                    ctx.moveTo(this.lastX[role], this.lastY[role]);
                    ctx.lineTo(offsetX, offsetY);
                    ctx.stroke();
                    this.lastX[role] = offsetX;
                    this.lastY[role] = offsetY;
                }
            }
        },
        stopDrawing(role) {
            this.isDrawing[role] = false;
        },
        clearSignature(role) {
            const canvas = this.$refs[`${role}SignatureCanvas`];
            if (canvas) {
                const ctx = canvas.getContext("2d");
                ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
                this.formData[`${role}Signature`] = null;
            }
        },
        async saveSignature(role) {
            const canvas = this.$refs[`${role}SignatureCanvas`];
            if (canvas) {
                this.formData[`${role}Signature`] = canvas.toDataURL("image/png");
                console.log(`${role}签名已保存:`, this.formData[`${role}Signature`]);
                try {
                    const response = await axios.post('/api/staff-supplement/save', this.formData);
                    console.log(`${role} 部门信息保存成功`, response.data);
                } catch (error) {
                    console.error(`${role} 部门信息保存失败`, error);
                }
            }
        },
        getCoordinates(e, canvas) {
            if (e.type.includes("touch")) {
                const rect = canvas.getBoundingClientRect();
                return {
                    offsetX: e.touches[0].clientX - rect.left,
                    offsetY: e.touches[0].clientY - rect.top
                };
            }
            return {
                offsetX: e.offsetX,
                offsetY: e.offsetY
            };
        },
        async saveForm() {
            try {
                // 数据验证
                if (!this.formData.applicationDepartment) {
                    this.$message.error('请输入申请部门');
                    return;
                }
                if (!this.formData.applicationPosition) {
                    this.$message.error('请输入申请职位');
                    return;
                }
                if (!this.formData.applicant) {
                    this.$message.error('请输入申请人');
                    return;
                }

                const response = await axios.post('/api/staff-supplement/save', this.formData);
                this.$message.success('保存成功');
                this.viewList();
            } catch (error) {
                console.error('保存失败:', error);
                this.$message.error('保存失败: ' + (error.response?.data || error.message));
            }
        },
        viewList() {
            this.$router.push('/zengbu/biao-list');
        }
    }
};
</script>

<style scoped>
table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
}

th,
td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

.textkuang {
    width: 100%;
    height: 110px;
    resize: none;
    outline: none;
    border: 1px solid #ddd;
}

input[type="number" i] {
    font-family: '宋体';
    width: 35px;
    text-align: end;
    outline: none;
}
</style>